<template>
	<view>
		<view class="category-menu">
			<view v-for="(item, index) in category_menu" :key="index" class="menu-item">
				<view class="menu-icon" :style="'background-color:' + item.color + ';'">
					<text :class="'iconfont ' + item.iconfont"></text>
				</view>
				<text>{{ item.info }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"category-box",
		data() {
					return {
						category_menu: [
							{
								color: '#6d56fe',
								iconfont: 'icon-zhihuixiaoyuan',
								info: '美食外卖',
								page: "/pages/school/school"
							},
							{
								color: '#f49d48',
								iconfont: 'icon-jihua',
								info: '商超便利'
							},
							{
								color: '#735dfe',
								iconfont: 'icon-shu-duidie',
								info: '水果鲜花'
							},
							{
								color: '#61db9b',
								iconfont: 'icon-dasaizhangcheng',
								info: '甜品饮品'
							},
							{
								color: '#a836f2',
								iconfont: 'icon-shipin',
								info: '粥粉面点'
							},
							{
								color: '#5cc8b9',
								iconfont: 'icon-fengcai',
								info: '炸鸡炸串'
							},
							{
								color: '#fd6f75',
								iconfont: 'icon-shuben',
								info: '快餐便当'
							},
							{
								color: '#7998f2',
								iconfont: 'icon-shouye',
								info: '晚餐'
							}
						],
					}
				},
				onLoad() {
		
				},
				methods: {
		
				}
			}
		</script>
		
		<style>
			.category-menu {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
			
			
			.menu-item {
				margin: 20upx 0upx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.menu-icon {
				width: 80upx;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #6d56fe;
				border-radius: 40%;
				color: #fff;
				margin-bottom: 20upx;
			}
			
			.menu-icon .iconfont {
				font-size: 50upx;
			}
		</style>